<template>
  <div class="container">
    <div class="bg-color-white">
      <div ref="search" class="search-bar">
        <van-search 
          background="#fff" 
          placeholder="搜索顾客昵称/手机号"
          @search="search" v-model="listQuery.nickname" />
      </div>
      <div class="v-align-c tag-bar" 
        @click="$pt.navigateTo({url: '/pages/home/customer-manage/tags-manage/main'})">
        <img class="tag-img-icon" v-if="fileSpace" :src="fileSpace + '/images/customer-group.png'" alt="">
        <div class="font-18 mar-l-12">标签管理</div>
      </div>
      <van-sticky class="search-sticky">
        <van-tabs :active="activeIndex" @change="tabClick" color="#f8c400" :border="false">
          <van-tab :title="item" v-for="(item, index) in statusList" :key="index"></van-tab>
        </van-tabs>
      </van-sticky>
    </div>
    <div class="index-bar">
      <div v-for="(item, index) in listArrData" :key="index">
        <div v-if="item.data.length > 0" :id="'active-top-' + (item.letter === '#' ? 'AZ' : item.letter)" >
          <div class="letter-title">{{item.letter}}</div>
          <div 
            v-for="(group, groupIndex) in item.data" 
            :key="groupIndex" 
            class="pad-l-15 index-bar-wrap"
            @click="$pt.navigateTo({url:'/pages/home/customer-manage/detail/main?id=' + group.memberId  + '&name=' + group.nickname})">
            <div class="index-bar--item">
              <img :src="group.avatar" class="width-36 height-36" alt="">
              <div class="mar-l-11">{{group.nickname}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pad-10 mar-t-10 align-c" v-if="dataNone">
        <img v-if="fileSpace" mode="widthFix" class="width-247.5 height-193.5 mar-t-30"
            :src="fileSpace + '/images/customer-nodata.png'"/>
        <div class="pad-t-22 font-18 font-gray">暂无顾客数据~</div>
      </div>
    </div>
    <div class="scroll-index">
      <div v-for="(item, index) in listArrData" :key="index">
        <!-- :class="{'scroll-index__active': scrollIndex === item.letter}" -->
        <div class="scroll-index--item"          
          v-if="item.data.length > 0"
          @click="scrollIndexClick(item.letter, index)">
          {{item.letter}}
        </div>
      </div>
    </div>
    <!-- <div class="pull-refresh">
      <div class="content-list" v-if="!dataNone">
        <div class="list-row" v-for="(item, index) in listData" :key="index" 
        @click="$pt.navigateTo({url:'/pages/personal/customer-manage/detail/main?id=' + item.memberId  + '&name=' + item.nickname})">
          <img v-if="item.avatar" :src="item.avatar" mode="cover"/>
          <div class="nickname">{{item.nickname}}</div>
        </div>
        <base-line v-if="finishedLine"  title='我是有底线滴'></base-line>
      </div>
      <div class="pad-10 mar-t-10 align-c" v-if="dataNone">
        <img v-if="fileSpace" mode="widthFix" class="width-247.5 height-193.5 mar-t-30"
            :src="fileSpace + '/images/customer-nodata.png'"/>
        <div class="pad-t-22 font-18 font-gray">暂无顾客数据~</div>
      </div>
    </div> -->
  </div>
</template>

<script>
  import {
    paginMemberShoppingReport
  } from '@/api/personal'
  import baseLine from '@/components/BaseLine/index'
  import { makePy } from '@/utils/pingyin/initials'
  export default {
    components: { baseLine },
    data() {
      return {
        statusList: ['全部', '已消费', '未消费'],
        activeIndex: 0,
        listData: [],
        currentPage: 1,
        manageBtn: true,
        tabsRow: false,
        preScroll: 0,
        pullLoad: {
          loading: false,
          finished: false
        },
        dataNone: false,
        noCustomer: true,
        listQuery: {
          memberId: '',
          buyStatus: '',
          currentPage: 1,
          size: 20,
          nickname: ''
        },
        finishedLine: false,
        globalStyle: {},
        scrollIndex: '', // 滚动锚点激活
        srcollIndexList: [],
        scrollTop: '',
        offsetTop: '',
        scrollIndexHeights: [],
        timer: null,
        durationTimer: null,
        listArrData: []
      }
    },
    onLoad() {
      // 初始化data
      // Object.assign(this.$data, this.$options.data())
    },
    mounted() {
      let getAppInfo = this.$pt.getStorageSync('appInfo')
      this.globalStyle = getAppInfo.style
      this.listData = []
      this.currentPage = 1
      this.activeIndex = 0
      this.listQuery.nickname = ''
      this.listQuery.buyStatus = ''
      this.listQuery.currentPage = 1
      this.paginMemberShoppingReport()
    },
    onUnload() {
      clearTimeout(this.durationTimer)
      this.durationTimer = null
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.paginMemberShoppingReport()
      }
    },
    onPageScroll(e) {
      if (this.scrollClick) return
      if (this.timer) return
      this.timer = setTimeout(() => {
        clearTimeout(this.timer)
        this.timer = null
        if (this.scrollIndexHeights.length) {
          this.scrollIndexHeights.forEach((item, index) => {
            if (e.scrollTop > item.top) {
              this.scrollIndex = item.key
            }
          })
        }
      }, 100)
    },
    methods: {
      typeTabClick(typeName, index) {
        this.listData = []
        this.currentPage = 1
        this.statusList = ''
        this.activeIndex = 0
        this.pullLoad.finished = false
        // this.cancel()
        this.paginMemberShoppingReport()
      },
      tabClick(e) {
        this.listData = []
        this.currentPage = 1
        this.scrollIndex = ''
        this.activeIndex = e.mp.detail.index
        this.pullLoad.finished = false
        this.$pt.pageScrollTo({
          scrollTop: 0
        })
        // this.cancel()
        this.paginMemberShoppingReport()
      },
      cancel() {
        this.listData = []
        this.currentPage = 1
        this.listQuery.nickname = ''
        this.pullLoad.finished = false
        this.paginMemberShoppingReport()
      },
      search(e) {
        this.listData = []
        this.listQuery.nickname = e.mp.detail
        this.currentPage = 1
        this.pullLoad.finished = false
        setTimeout(() => {
          this.paginMemberShoppingReport()
        }, 200)
      },
      paginMemberShoppingReport() {
        this.listQuery.memberId = this.getCustomerId
        this.listQuery.currentPage = this.currentPage
        if (this.activeIndex === 0) {
          this.listQuery.buyStatus = ''
        } else if (this.activeIndex === 1) {
          this.listQuery.buyStatus = 1
        } else if (this.activeIndex === 2) {
          this.listQuery.buyStatus = 0
        }
        paginMemberShoppingReport(this.listQuery).then((response) => {
          this.dataNone = false
          if (response.isError) return
          response.data.records.forEach(item => {
            this.listData.push(item)
          })
          this.parseName(this.listData)
          if (this.activeIndex === 0) {
            // 判断是否有顾客
            if (this.listData.length > 0) {
              this.noCustomer = false
            } else {
              this.noCustomer = true
            }
          }
          for (var i = 0; i < this.listData.length; i++) {
            this.listData[i].labels = []
            if (this.listData[i].labelNames) {
              this.listData[i].labels = this.listData[i].labelNames.split(',')
            }
          }
          this.currentPage++
          if (this.listData.length === 0 || this.listData.length >= response.data.total) {
            this.pullLoad.finished = true
          }
          if (response.data.records.length === 0) {
            this.dataNone = true
          }
        }).catch(() => {
        })
      },
      parseName(array) {
        this.listArrData = []
        let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
        this.srcollIndexList = [...letters, '#']
        // let zh = '阿八嚓哒妸发旮哈i讥咔垃痳拏噢妑七呥扨它uv穵夕丫帀'.split('')
        let other = []
        let words = []
        let zhArr = []
        let dict = []
        var resultArray = array.sort(
          function compareFunction(param1, param2) {
            return param1.nickname.localeCompare(param2.nickname, 'zh-CN')
          }
        )
        let zhPattern = new RegExp('[\u4E00-\u9FA5]+')
        let letterPattern = new RegExp('[A-Za-z]+')
        if (resultArray.length > 0) {
          resultArray.forEach(item => {
            if (zhPattern.test(item.nickname.slice(0, 1))) {
              zhArr.push(item)
            } else if (letterPattern.test(item.nickname.slice(0, 1))) {
              words.push(item)
            } else {
              other.push(item)
            }
          })
        }
        letters.forEach(item => {
          let obj = {
            letter: item.toLocaleUpperCase(),
            data: []
          }
          if (words.length > 0) {
            words.forEach(e => {
              if (e.nickname.slice(0, 1).toUpperCase() === item.toUpperCase()) {
                obj.data.push(e)
              }
            })
          }
          if (zhArr.length > 0) {
            zhArr.forEach(e => {
              if (e.nickname && makePy(e.nickname).length && item === makePy(e.nickname)[0].charAt(0)) {
                obj.data.push(e)
              }
            })
          }
          if (obj.data.length > 0) {
            dict.push(obj)
          }
        })
        if (other.length > 0) {
          dict.push({
            letter: '#',
            data: other
          })
        }
        this.listArrData = dict
        let that = this
        this.$nextTick(() => {
          that.listArrData.forEach(item => {
            if (item.data.length === 0) return
            let _this = that
            that.$pt.createSelectorQuery()
              .select('#active-top-' + (item.letter === '#' ? 'AZ' : item.letter))
              .boundingClientRect()
              .exec((res) => {
                if (res[0]) {
                  _this.scrollIndexHeights.push({
                    key: item.letter,
                    top: res[0].top - 50
                  })
                }
              })
          })
        })
      },
      scrollIndexClick(item, index) {
        this.scrollClick = true
        this.scrollIndex = item
        this.$pt.pageScrollTo({
          scrollTop: this.scrollIndexHeights[index].top,
          success: () => {
            this.durationTimer = setTimeout(() => {
              this.scrollClick = false
            }, 300)
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.container{
  background: white;
  min-height: calc(100vh);
}
  .panel{
    box-shadow: 0 0 0!important;
  }
  .panel-item{
    padding: 10px 0 10px 0px;
    border-bottom: #dfdfdf 1px solid;
    &:last-child{
      border-bottom: none;
    }
    .regular-btn{
      border: #f8c400 1px solid;
      border-radius: 5px;
      padding: 2px 8px;
      color: #333;
      display: inline-block;
    }
    .name{
      color: #333333;
    }
    .check{
      margin-top: -2px;
      margin-right: 3px;
    }
    .arrow-pc{
      color: #999999;
    }
    .font-gray {
      color: #999999;
    }
  }
  
  .order-div {
    background-color: #fff;
    border-radius: 5px;
    margin: 10px;
    font-size: 13px;
    padding: 10px;
  }

  .userinfo-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 16px;
  }

  .goods-title {
    height: 40px;
    overflow: hidden;
  }

  .img-item {
    width: 70px;
    height: 70px;
    border-radius: 2px;
  }

  .order-btn {
    background-color: #fff;
    color: #969896;
    font-size: 12px;
    line-height: 1;
    padding: 6px;
  }

  .btn-save {
    background-color: #f8c400;
  }

.search-bar {
  background: white;
  // 对搜索框进行改造
  /deep/ .van-search--show-action {
    background: unset !important;
    padding-right: unset;
  }
  /deep/ .van-cell {
    background: #f4f4f4;
    border-radius: 25px;
  }
}
.tag-bar{
  height: 55px;
  background-color: #F8F8F8;
  padding-left: 15px;
  padding-right: 15px;
  .tag-img-icon{
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
}
.search-sticky{
  /deep/.van-tabs--line{
    padding-top: 50px;
  }
  /deep/.van-tabs__nav{
    justify-content: space-between;
    padding: 0 35px;
    .van-tabs__line{
      visibility: hidden;
    }
    .van-tab{
      flex: unset;
      font-size: 15px;
      line-height: 50px;
    }
    .van-tab--active{
      position: relative;
      font-size: 16px;
      font-weight: bold;
    }
    .van-tab--active::after{
      content: '';
      position: absolute;
      left: 50%;
      bottom: 8px;
      transform: translateX(-50%);
      width: 25px;
      height: 4px;
      border-radius: 2px;
      background-color: #FFE200;
    }
  }
}
.tabs-bar{
  /deep/ .van-tabs{
    padding: 0;
    height: 39px;
  }
  /deep/ .van-tab{
    height: 38px;
    line-height: 38px;
  }
  /deep/ .van-tab .van-tab__title{
    font-size: 13px !important;
    margin-top: 2px;
  }
  /deep/ .van-tab--active .van-tab__title{
    font-size: 16px !important;
    margin-top: 2px;
  }
  /deep/ .van-tab.van-tab--active:after {
      width: 20px;
      left: calc(50% - 13px);
  }
}
  .btn-border {
    border: 1px solid #969896;
    border-radius: 5px;
    height: 20px;
    background-color: #ffffff;
  }
  .tabs-head{
    position: fixed;
    top: -47px;
    left: 0;
    width: 100%;
    transition: all 0.05s;
    background: white;
  }
  .tabs-fixed{
    top: 0px;
  }
  .content-list{
    .list-row{
      padding-left: 15px;
      margin-top: 5px;
      height: 45px;
      display: flex;
      justify-content: left;
      align-items: center;
      &:last-child{
        .nickname{
          border-bottom: unset;
        }
      }
      img{
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 12px;
      }
      .nickname{
        width: calc(100% - 47px);
        font-size: 15px;
        color: #333333;
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #ededed;
      }
    }
  }
  .scroll-index{
    position: fixed;
    right: 0;
    top: 50%;
    width: 20px;
    transform: translateY(-50%);
    z-index: 9;
    font-size: 10px;
    font-weight: bold;
    .scroll-index--item{
      width: 14px;
      height: 14px;
      line-height: 15px;
      text-align: center;
    }
    .scroll-index__active{
      background-color: #FFE200;
      border-radius: 50%;
    }
  }
  .index-bar{
    .letter-title{
      background-color: #F5F5F5;
      font-size: 11px;
      height: 23px;
      line-height: 23px;
      padding-left: 15px;
    }
    .index-bar-wrap{
      .index-bar--item{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 0.5px solid rgba(0, 0, 0, .1);
        height: 55px;
        &:last-child{
          border-bottom: unset;
        }
        img{
          border-radius: 50%;
        }
      }
    }
  }
</style>
